<!--
 * @Description:
 * @version:
 * @Author: 陈捷
 * @Date: 2022-04-08 17:20:13
 * @LastEditors: 陈捷
 * @LastEditTime: 2022-04-08 17:20:13
-->
<template>
  <div>
    <HeaderNav />
    <van-form @submit="onSubmit">
      <div class="back-white">
        <van-field
          v-model="weight"
          label="目前体重 (g)"
          label-width="150"
          label-class="nowweight"
          type="weight"
          :rules="[{ required: true, message: '请填写体重' }]"
        />

        <div class="c">
          <div class="left">
            <span>喂养方式</span>
          </div>
          <div class="right">
            <van-button
              :class="{ btn: btn }"
              round
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn')"
            >纯母乳</van-button>
            <van-button
              round
              :class="{ btn: btn1 }"
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn1')"
            >混合</van-button>
            <van-button
              round
              :class="{ btn: btn2 }"
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn2')"
            >人工</van-button>
          </div>
        </div>
        <van-field
          v-model="liang"
          label="吃奶量 (ml)"
          label-width="150"
          type="liang"
          :rules="[{ required: true, message: '请填写吃奶量' }]"
        />
        <van-field
          v-model="nai"
          label="吃奶次数"
          label-width="150"
          type="nai"
          :rules="[{ required: true, message: '请填写吃奶次数' }]"
        />
        <div class="c">
          <div class="left">
            <span>呕吐情况</span>
          </div>
          <div class="right">
            <van-button
              :class="{ btn: btn3 }"
              round
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn3')"
            >无</van-button>
            <van-button
              round
              :class="{ btn: btn4 }"
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn4')"
            >有</van-button>
          </div>
        </div>
        <div class="c">
          <div class="left">
            <span>大便情况</span>
          </div>
          <div class="right">
            <van-button
              :class="{ btn: btn5 }"
              round
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn5')"
            >糊状</van-button>
            <van-button
              round
              :class="{ btn: btn6 }"
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn6')"
            >稀</van-button>
            <van-button
              round
              :class="{ btn: btn7 }"
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn7')"
            >其他</van-button>
          </div>
        </div>
        <van-field
          v-model="bian"
          label-class="nowweight"
          label="大便次数"
          type="bian"
          label-width="150"
          :rules="[{ required: true, message: '请填写大便次数' }]"
        />
        <div class="c">
          <div class="left"><span class="mian">面色</span></div>
          <div class="right">
            <van-button
              :class="{ btn: btn8 }"
              round
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn8')"
            >红润</van-button>
            <van-button
              round
              :class="{ btn: btn9 }"
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn9')"
            >黄染</van-button>
            <van-button
              round
              :class="{ btn: btn10 }"
              type="default"
              size="mini"
              native-type="button"
              @click="btnFn('btn10')"
            >其他</van-button>
          </div>
        </div>
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="四肢活动度"
          label-width="150"
          label-class="nowweight"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
        <NoData v-if="false" />
      </div>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
        >提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import HeaderNav from '@/components/headerNav/index'

export default {
  name: 'NewVisit',
  // import引入的组件需要注入到对象中才能使用
  components: {
    HeaderNav
  },
  data() {
    // 这里存放数据
    return {
      weight: '',
      liang: '',
      nai: '',
      bian: '',

      btn: false,
      btn1: false,
      btn2: false,
      btn3: false,
      btn4: false,
      btn5: false,
      btn6: false,
      btn7: false,
      btn8: false,
      btn9: false,
      btn10: false,
      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '未见异常',
          value: '330000'
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 加载布尔值成功 初始化数据接口判断在这
    await this.getData()
    this.today = new Date()
    this.loading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // window.sessionStorage.clear();
    // console.log(this.$route.query.title);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周.期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    getData() {
      // 拉取数据接口
    },
    btnFn(btn) {
      if (btn === 'btn') {
        this.btn = !this.btn
      } else if (btn === 'btn1') {
        this.btn1 = !this.btn1
      } else if (btn === 'btn2') {
        this.btn2 = !this.btn2
      } else if (btn === 'btn3') {
        this.btn3 = !this.btn3
      } else if (btn === 'btn4') {
        this.btn4 = !this.btn4
      } else if (btn === 'btn5') {
        this.btn5 = !this.btn5
      } else if (btn === 'btn6') {
        this.btn6 = !this.btn6
      } else if (btn === 'btn7') {
        this.btn7 = !this.btn7
      } else if (btn === 'btn8') {
        this.btn8 = !this.btn8
      } else if (btn === 'btn9') {
        this.btn9 = !this.btn9
      } else if (btn === 'btn10') {
        this.btn10 = !this.btn10
      }
    },
    onFinish({ selectedOptions }) {
      this.show = false
      this.fieldValue = selectedOptions.map(option => option.text).join('')
    },
    onSubmit(values) {
      console.log('submit', values)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
/deep/ .van-hairline--bottom::after {
  display: none !important;
}
/deep/ .van-field__control {
  font-weight: 400;
}
/deep/ .van-field__label {
  color: #9b9b9b;
}
/deep/ .van-field {
  margin-bottom: 20px;
}
.van-field__nowweight {
  color: red !important;
}
.btn {
  background: rgba(74, 144, 226, 0.15) !important;
  color: #4a90e2 !important;
}
.right {
  // margin-left: 25px;
  text-align: center;
  /deep/ .van-button {
    width: 80px;
    height: 30px;
    line-height: 30px;
    vertical-align: hidden;
    background: #f4f4f4;
    color: #343434;
    margin-left: 25px;
    font-size: 14px;
    span {
      margin: 0;
      // color: #343434;
    }
  }
}
.c {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-bottom: 28px;
}
.left {
  margin-right: 30px;
}
.left span {
  font-size: 15px;
  margin-left: 15px;
  color: #9b9b9b;
}
.mian {
  margin-right: 30px;
  color: red !important;
}
.tijiao {
  width: 500px;
  height: 50px;
  margin-top: 30px;
  margin-left: 10px;
}
</style>
<style lang="less">
.nowweight {
  color: red !important;
}
</style>
